<template>
  <div class="app-container">
    <div class="card-box">
      <el-space>
        <el-input v-model="params.search" placeholder="邀请码、名称查询" />
        <el-button type="primary" @click="agentStore.fetchList(params)">查询</el-button>
      </el-space>
    </div>
    <div class="card-box">
      <el-table
        v-loading="agentStore.loading.list || agentStore.loading.update"
        :data="agentStore.list"
        row-id="id"
      >
        <el-table-column label="ID" prop="id" />
        <el-table-column label="名称" prop="name" />
        <el-table-column label="用户" prop="user.username" />
        <el-table-column label="省" prop="province.name" />
        <el-table-column label="市" prop="city.name" />
        <el-table-column label="邀请码" prop="invitation_code" />
        <el-table-column label="操作" width="300">
          <template #default="{ row }">
            <el-button type="primary" link @click="handlePreviewQRCode(row)">
              供应商二维码
            </el-button>
            <el-button type="primary" link @click="handlePreviewMerchantQRCode(row)">
              商户二维码
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.size"
        style="margin-top: 10px"
        background
        :total="agentStore.totalCount"
        @change="agentStore.fetchList(params)"
      />
    </div>
    <el-dialog v-model="qrcodeVisible" title="查看二维码">
      <div v-if="clientType == 'supplier'" class="qrcode-box">
        <qrcode-vue ref="qrcodeRef" :value="qrcodeValue" :size="300" level="H" />
        <el-button style="margin-top: 20px" type="primary" @click="handleCopyLink">
          复制链接
        </el-button>
      </div>
      <div v-else style="display: flex; justify-content: center">
        <img :src="weappQRCode" alt="weappQRCode" style="width: 300px; height: 300px" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { type AgentListQuery, type AgentItemType } from "@/api/agent/agent";
import { useAgentStoreHook } from "@/store/modules/agent/agent";
import QrcodeVue from "qrcode.vue";
import request from "@/utils/request";

const agentStore = useAgentStoreHook();

const applyURL =
  import.meta.env.MODE === "development"
    ? "http://192.168.2.18:3000/#/login"
    : "http://supplier.zkodoo.cc/#/login";

const params = reactive<AgentListQuery>({
  search: "",
  page: 1,
  size: 10,
});

const qrcodeRef = ref();
const qrcodeVisible = ref(false);
const qrcodeValue = ref("");
const clientType = ref("supplier"); // supplier merchant 供应商 商户
const weappQRCode = ref("");

async function handlePreviewMerchantQRCode(row: AgentItemType) {
  clientType.value = "merchant";
  const response = await request.post("/api/wx/qrcode/", {
    path: "pages/app/store",
    env: import.meta.env.MODE == "development" ? "develop" : "release",
    param_key: "agent",
    param_value: row.id,
  });
  if (response.data) {
    weappQRCode.value = `data:image/png;base64,${response.data}`;
    qrcodeVisible.value = true;
  }
}

function handlePreviewQRCode(row: AgentItemType) {
  clientType.value = "supplier";
  qrcodeValue.value = `${applyURL}?id=${row.id}&invitation_code=${row.invitation_code}`;
  qrcodeVisible.value = true;
}

async function handleCopyLink() {
  await navigator.clipboard.writeText(qrcodeValue.value);
  ElMessage.success("链接已复制到剪贴板");
}

onMounted(() => {
  agentStore.fetchList(params);
});
</script>

<style scoped lang="scss">
.qrcode-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
</style>
